<script setup lang="ts">
import HeaderNav from './components/HeaderNav.vue';

// 导航链接配置
const navLinks = [
  { name: '首页', path: '/' },
  { name: '仪表盘', path: '/dashboard' },
  { name: '设置', path: '/settings' },
  { name: '关于我们', path: '/about' }
];

// 用户信息
const userInfo = {
  name: '张三',
  initial: '张'
};

// 用户菜单配置
const userMenuItems = [
  { key: 'profile', label: '个人资料' },
  { key: 'settings', label: '账号设置' },
  { key: 'logout', label: '退出登录' }
];

// 处理用户菜单点击
const handleUserMenuClick = (item: { key: string; label: string }) => {
  console.log('用户菜单点击:', item);
  if (item.key === 'logout') {
    alert('已退出登录');
  }
};
</script>

<template>
  <div class="app">
    <!-- 使用HeaderNav组件 -->
    <HeaderNav
      :logo-text="'V'"
      :title="'Vue 导航示例'"
      :nav-links="navLinks"
      :user-info="userInfo"
      :user-menu-items="userMenuItems"
      @user-menu-click="handleUserMenuClick"
    />
    
    <!-- 路由出口 -->
    <main class="main-content">
      <router-view />
    </main>
  </div>
</template>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f0f2f5;
  color: #333;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  padding-top: 20px;
}
</style>
